<template>
	<view class="box">
		<!-- 背景 -->
		<view class="bg"></view>
		<!-- 头部 -->
		<view class="head fw-bt">
			<view class="input f-w">
				<view class="input-img f-w">
					<image src="https://jw.xzsw2021.com/static/user/icon_250@2x.png" mode=""></image>
				</view>
				<input type="text" v-model="keyword" placeholder="请输入商品搜索" @input="getinput"  @confirm="search" confirm-type="search">
				<view class="input-btn" @click="search">搜索</view>
			</view>
			<view class="lingquan" @click="goGuiZe">
				<view>拼团规则</view>
			</view>
		</view>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs lineColor="#fff" :activeStyle="{
					color: '#fff',
					fontWeight: 'bold',
					fontSize:'32rpx'
				}" :inactiveStyle="{
					color: '#fff',
					fontSize:'32rpx'
				}" keyName='cate_name' :list="list1" @click="click"></u-tabs>
		</view>
		<!-- 商品表 -->
		<scroll-view class="list" scroll-y="true" @scrolltolower="getMore">
		
			<view class="list2" v-if="list2.length">
				<view class="demo flex" v-for="(item,index) of list2" :key="index" @click="goDetail(item.product_group_id)">
					<view class="d-img f-w">
						<image :src="item.product.image" mode=""></image>
					</view>
					<view class="right">
						<view class="one hide-line bold f28">{{item.product.store_name}}</view>
						<view class="two f-w">
							<view class="tag1">已售</view>
							<view class="tag2">{{item.product.sales}}份</view>
						</view>
						<view class="three">
							<view class="red">拼团价￥<text class="bold">{{item.price}}</text></view>
							<view class="f24 c999">原价￥{{item.product.price}}</view>
						</view>
						<view class="four" >
							拼团
						</view>
					</view>
				</view>
			</view>
			
			<view class="none"  v-else>
				<view class="none-img">
					<image src="https://jw.xzsw2021.com/static/client/icon_66@2x.png" mode=""></image>
				</view>
				<view class="none-desc tr f30 c666">抱歉，未能找到您搜索的商品</view>
			</view>
			
		</scroll-view>
		<!-- 拼团订单 -->
		<view class="float1" @click="goOrder">
			<image src="https://jw.xzsw2021.com/static/user/icon_251@2x.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [], //
				cateid: '',
				list2: [],
				page:1,
				keyword:''
			}
		},
		onLoad() {
			this.getcate1()
			this.getlist(this.page)
		},
		methods: {
			// 获取一级分类
			getcate1() {
				this.$request('store/product/category/lst', {}, 'GET').then(res => {
					let list = res.data
					list.unshift({
						store_category_id: "",
						cate_name: '全部'
					})
					this.list1 = list
				})

			},
			getinput(e){
				let key=e.detail.value
				if(!key){
					this.page=1
					this.getlist(this.page)
				}
			},
			// 拼团规则、
			goGuiZe() {
				uni.navigateTo({
					url: '/pages/xieyi/xieyi?type=7'
				})
			},
			// 切换标签栏
			click(item) {
				this.cateid = item.store_category_id
				this.page = 1
				this.getlist(this.page)
			},
			getlist(e) {
				let data = {
					page: e,
					limit: 8,
					keyword:this.keyword,
					store_category_id: this.cateid
				}
				this.$request('store/product/group/lst', data, 'GET').then(res => {


					if (e == 1) {
						this.list2 = res.data.list
					} else {
						if (res.data.list.length == 0) {
							uni.showToast({
								title: "暂无更多",
								icon: "none"
							})
							return
						}
						let list2 = this.list
						list2 = [...list2, ...res.data.list]
						this.list2 = list2
						this.page = e
					}


				})

			},
			// 搜索
			search() {
				this.page = 1
				this.getlist(this.page)
				
				
			},
			// 加载更多
			getMore() {
				console.log('加载更多');
			},
			// 详情
			goDetail(id) {
				console.log('详情');
				uni.navigateTo({
					url: '/pages/user/spellgroup/spellgroup-goods/spellgroup-goods?id=' + id
				})
			},
			// 拼团
			goPinTuan(id) {
				console.log('拼团');
				uni.redirectTo({
					url: '/pages/user/spellgroup/spellgroup-detail/spellgroup-detail?id=' + id
				})
			},
			//拼团订单
			goOrder() {
				
				uni.navigateTo({
					url: '/pages/user/spellgroup/order-list'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.myimg {
		width: 100%;
		height: 100%;
	}

	.box {
		position: relative;

		.bg {
			position: absolute;
			width: 750rpx;
			height: 400rpx;
			background: linear-gradient(180deg, #E22317 30%, #FD4676 70%, #F5f5f5 100%);
		}

		.head {
			width: 750rpx;
			position: relative;
			padding: 26rpx 0 0 30rpx;
			box-sizing: border-box;

			.input {
				width: 554rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;

				.input-img {
					margin: 0 14rpx 0 26rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						@extend .myimg
					}
				}

				input {
					width: 360rpx;
					font-size: 26rpx;
				}

				.input-btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					color: #fff;
					background: linear-gradient(64deg, #F94067, #E22317);
					border-radius: 30rpx;
				}
			}

			.lingquan {
				width: 145rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background: #FFFFFF;
				background-color: rgba(255, 255, 255, .1);
				border-radius: 34rpx 0rpx 0rpx 34rpx;
			}
		}

		.tabs {
			position: relative;
			padding: 30rpx 0 10rpx 10rpx;
		}

		.list {
			position: relative;
			margin: 30rpx auto 0;
			width: 690rpx;
			height: calc(100vh - 252rpx);
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			.none {
				overflow: hidden;

				.none-img {
					margin: 112rpx auto 20rpx;
					width: 366rpx;
					height: 330rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.list2 {
				padding: 6rpx 30rpx;

				.demo {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #eee;

					.d-img {
						flex-shrink: 0;
						width: 190rpx;
						height: 190rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}

					.right {
						position: relative;
						flex: 1;
						margin-left: 15rpx;
						overflow: hidden;

						.two {
							margin: 10rpx 0 28rpx;
							text-align: center;
							line-height: 28rpx;
							font-size: 22rpx;

							.tag1 {
								padding: 2rpx 8rpx;
								color: #fff;
								background: linear-gradient(64deg, #FF164E, #FC420A);
								border-radius: 4rpx 0rpx 0rpx 4rpx;
							}

							.tag2 {
								padding: 2rpx 8rpx;
								background: #FFF4F5;
								color: #F83535;
								border-radius: 0rpx 4rpx 4rpx 0rpx;
							}
						}

						.three {
							font-size: 24rpx;

							.bold {
								font-size: 44rpx;
							}

							.red {
								margin-bottom: 2rpx;
							}
						}

						.four {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 126rpx;
							height: 54rpx;
							line-height: 54rpx;
							text-align: center;
							color: #fff;
							font-size: 28rpx;
							background: linear-gradient(64deg, #FF164E, #FC420A);
							border-radius: 8rpx;
						}
					}
				}
			}

		}

		.float1 {
			position: fixed;
			right: 18rpx;
			bottom: 50rpx;
			width: 100rpx;
			height: 122rpx;

			image {
				width: 100%;
				height: 100%;
			}

			z-index: 101;
		}
	}
</style>
